<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原生ajax get请求</title>
</head>
<body>
  <button>点击发送请求</button>
  <div class="box"></div>
</body>
<style>
  .box {
    width: 200px;
    height: 100px;
    border: 1px solid;
  }
</style>
<script>
  // 获取button元素
  const btn = document.getElementsByTagName('button')[0]
  const box = document.getElementsByClassName('box')[0]
  // 绑定事件
  btn.onclick = function (){
    // 1. 创建对象
    const xhr = new XMLHttpRequest()
    // 2. 初始化 设置请求类型和url
    xhr.open('GET', 'http://127.0.0.1:8000/server')
    // 3. 发送
    xhr.send()
    // 4. 事件绑定 处理服务端返回的结果
    // on when 当...时候
    // readystate 是xhr对象中的属性，表示状态0,1,2,3,4（分别对应未初始化，open方法调用完毕，send方法调用完毕，服务端返回部分结果，服务端返回所有结果）
    // change 改变
    xhr.onreadystatechange = function(){
      // 判断服务端返回所有结果
      if(xhr.readyState === 4){
        // 判断相应状态码，2开头都是成功
        if(xhr.status >= 200 && xhr.status < 300){
          // 处理结果
          console.log(xhr.status) // 响应状态码
          console.log(xhr.statusText) // 响应状态字符串
          console.log(xhr.getAllResponseHeaders()) // 所有响应头
          console.log(xhr.response) // 响应体
          box.innerHTML = xhr.response
        }
      }
    }
  }
</script>
</html>